<script setup lang="ts">
import { Handle, Position } from "@vue-flow/core"; // 导入 Position 类型
import { NodeToolbar } from "@vue-flow/node-toolbar";

// props 类型定义
const props = defineProps({
  id: String,
  data: {
    type: Object,
    required: true,
    rootid: "",
    default: () => ({
      toolbarVisible: false,
      toolbarPosition: "top" as Position,
      label: "",
      consumption: "",
      unit: ""
    })
  }
});

// 发射事件
defineEmits(["toolbar-action"]);
const actions = ["详情"];
</script>
<template>
  <NodeToolbar :is-visible="data.toolbarVisible" :position="data.toolbarPosition as Position">
    <button v-for="action of actions" :key="action" type="button" @click="$emit('toolbar-action', action, props.data.rootid, 2)">
      {{ action }}
    </button>
  </NodeToolbar>
  {{ data.label }}
  <!-- <Handle type="target" :position="Position.Right" /> -->
  <!-- <Handle type="target" :position="Position.Left" /> -->
  <Handle type="source" :position="Position.Right" id="right" />
</template>
